<!--[if lt IE 9]>
	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<link rel="icon" href="/assets/favicon.ico" mce_href="/assets/favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
		<link rel="image_src" type="image/jpeg" href="/assets/img/logo.png" />

		<title>
			{% if blocks.title then %}
			{* blocks.title *} | {{lwf.auth.user}}
			{% else %}
			FreeIOE Platform | {{lwf.auth.user}}
			{% end %}
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

		<link rel="stylesheet" type="text/css" href="/assets/semantic/semantic.min.css" />
		<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
		<link rel="stylesheet" type="text/css" href="/assets/library/animate.min.css" />

		<script type="text/javascript" src="/assets/library/jquery.min.js"></script>
		<script type="text/javascript" src="/assets/library/jquery.form.min.js"></script>
		<script type="text/javascript" src="/assets/library/jquery.nicescroll.min.js"></script>
		<script type="text/javascript" src="/assets/library/jquery.easing.min.js"></script>

		{* blocks.base_header *}
	</head>

	<body>
		<div class="ui fixed top menu">
			<a href="javascript:void(0)" class="icon active item" id="hideToggle"><h3><i class="chevron left icon"></i></h3></a>
			<a href="javascript:void(0)" class="icon active item" id="showToggle"><h3><i class="chevron right icon"></i></h3></a>
			<a href="/" data-toggle="slide" class="item"><h3>FreeIOE</h3></a>
			<div class="menu right">
				<div tabindex="0" class="ui icon dropdown item" data-content="Select Language">
					<i class="large world icon"></i>
					<div tabindex="-1" class="menu transition hidden">
						<a class="item" href="/lang/en_US"><i class="us flag"></i> English</a>
						<a class="item" href="/lang/zh_CN"><i class="cn flag"></i> 中文(简体)</a>
					</div>
				</div>
				{% if lwf.auth.user == 'Guest' then %}
				<a href="/user/login" class="icon item" data-content="Login">
					<i class="large sign in icon"></i>
				</a>
				<a href="http://www.freeioe.org" class="icon item">
					<img src="/assets/img/logo.png" class="ui avatar image" alt="logo">
				</a>
				{% else %}
				{% local avatar_path = '/assets/upload/avatar/'..lwf.auth.user..'.jpg' %}
				<a class="icon item pointer" data-toggle="popup" data-content="#mail" data-position="bottom right">
					<i class="mail icon"></i>
				</a>
				<div id="mail" class="ui fluid popup" style="min-width:400px;padding-top:30px;">
					<div class="ui divided items">
						<div class="item">
							<img src="{{avatar_path}}" class="ui avatar image">
							<div class="content">
								<a class="header">FreeIOE</a>
								<div class="description">
									Welcome to <a>FreeIOE Platform</a>...
								</div>
							</div>
						</div>
					</div>
					<div class="ui divider"></div>
					<a href="/sys/log" class="ui right floated tiny button">{{_('All Logs')}}</a>
				</div>
				<a class="icon item pointer" data-toggle="popup" data-content="#notif" data-position="bottom right">
					<i class="bell icon"></i>
				</a>
				<div id="notif" class="ui fluid popup" style="min-width:400px;padding-top:30px;">
					<div class="ui divided items">
						<div class="item">
							<div class="content">
								<i class="bell icon"></i> Device appear offline,
								<div class="extra content">
									Sunday, 20-03-2016
								</div>
							</div>
						</div>
					</div>
					<div class="ui divider"></div>
					<a href="/sys/comm" class="ui right floated tiny button">{{_('All Messages')}}</a>
				</div>
				<a class="icon item pointer" data-toggle="popup" data-content="#user" data-position="bottom right">
					<img src="{{avatar_path}}" class="ui avatar image" alt="">
				</a>
				<div id="user" class="ui popup">
					<div class="ui secondary vertical menu">
						<a href="/user/profile" class="item">{{_('Profile')}} <i class="user icon"></i></a>
						<a href="/sys/log" class="item">{{_('Logs')}} <i class="mail icon"></i><div class="ui inverted label">?</div></a>
						<a href="/sys/log?type=dmesg" class="item">{{_('dmesg')}} <i class="mail icon"></i><div class="ui inverted label">?</div></a>
						<a href="/sys/comm" class="item">{{_('Comms')}} <i class="exchange icon"></i><div class="ui inverted label">?</div></a>
						<a href="/event" class="item">{{_('Events')}} <i class="bell icon"></i><div class="ui inverted label">?</div></a>
						<div class="ui divider"></div>
						<a href="/user/logout" class="item">{{_('Logout')}} <i class="sign out icon"></i></a>
					</div>
				</div>
				{% end %}
			</div>
		</div>
		<div class="pusher">
			<div class="ui fluid container">
				<div class="ui two column grid">
					{% if lwf.auth.user ~= 'Guest' then %}
					{% local avatar_path = '/assets/upload/avatar/'..lwf.auth.user..'.jpg' %}
					<div class="side menu" id="sideMenu">
						<div align="center" class="profile">
							<br>
							<a href="/user/profile"><img src="{{avatar_path}}" alt="Avatar" class="ui circular image" width="150px" height="150px"></a>
							<div class="ui white header">{{lwf.auth.meta['fname'] or lwf.auth.user}}</div>
							<div class="ui divider"></div>
						</div>
						<div class="ui fluid vertical menu" id="verticalMenu">
							<a href="/dashboard" class="item"><i class="dashboard icon"></i> <span>{{_('Dashboard')}}</span></a>
							<a href="/app" class="item"><i class="cubes icon"></i> <span>{{_('Application')}}</span></a>
							<a href="/device" class="item"><i class="list layout icon"></i> <span>{{_('Device')}}</span></a>
							<a href="/cloud" class="item"><i class="cloud icon"></i> <span>{{_('Cloud')}}</span></a>
							<a href="/settings" class="item"><i class="setting icon"></i> <span>{{_('Settings')}}</span></a>
							<a href="/docs" class="item"><i class="file icon"></i> <span>{{_('Document')}}</span></a>
							<a href="http://forum.freeioe.org" class="item"><i class="help icon"></i> <span>{{_('Forum')}}</span></a>
							<a href="http://wiki.freeioe.org" class="item"><i class="users icon"></i> <span>{{_('Wiki')}}</span></a>
						</div>
					</div>
					{% else %}
					<div class="side menu" id="sideMenu">
						<div align="center" class="profile">
							<br>
							<a href=""><img src="/assets/img/logo.png" alt="logo" class="ui circular image" width="150px"></a>
							<div class="ui white header">FreeIOE</div>
							<div class="ui divider"></div>
						</div>
						<div class="ui fluid vertical menu" id="verticalMenu">
							<a href="/user/login" class="item"><i class="sign in icon"></i> <span>{{_('Login')}}</span></a>
							<a href="/docs" class="item"><i class="file icon"></i> <span>{{_('Documents')}}</span></a>
							<a href="http://forum.freeioe.org" class="item"><i class="help icon"></i> <span>{{_('Forum')}}</span></a>
							<a href="http://wiki.freeioe.org" class="item"><i class="users icon"></i> <span>{{_('Wiki')}}</span></a>
						</div>
					</div>
					{% end %}
					<div class="sixteen wide column" id="content">
						<div style="min-height:450px;padding-top:10px;">
							{% if blocks.main_header then %}
							<div class="header segment">
								<div class="container">
									{* blocks.main_header *}
								</div>
							</div>
							{% end %}
							<div class="main container">
								{* blocks.main *}
							</div>
						</div>
						{% if blocks.footer then %}
						{* blocks.footer *}
						{% else %}
						<div class="ui divider"></div>
						<div align="center">
							<div class="ui stackable divided relaxed grid">
								<div class="eight wide column">
									<h3 class="ui header">{{_('Help Make FreeIOE Better')}}</h3>
									<p>{{_('FreeIOE is an open source platform for internet of everythings. Please follow us on GitHub!!!')}}</p>
									<a class="github-button" href="https://github.com/freeioe/freeioe" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star freeioe/freeioe on GitHub">Star</a>
									<a class="github-button" href="https://github.com/freeioe/freeioe/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch freeioe/freeioe on GitHub">Watch</a>
									<a class="github-button" href="https://github.com/freeioe/freeioe/issues" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issue freeioe/freeioe on GitHub">Issue</a>
								</div>
								<div class="four wide column">
									<h5 class="ui teal header">{{_('Contribute')}}</h5>
									<div class="ui link list">
										<a class="item" href="https://github.com/freeioe/freeioe/" target="_blank">{{_('Source code')}}</a>
										<a class="item" href="http://github.com/freeioe/freeioe/issues" target="_blank">{{_('Issue Tracker')}}</a>
										<a class="item" href="http://freeioe.org/cla.html" target="_blank">{{_('CLA')}}</a>
										<a class="item" href="http://cloud.thingsroot.com" target="_blank">{{_('ThingsCloud')}}</a>
									</div>
								</div>
								<div class="four wide column">
									<h5 class="ui teal header">{{_('IOE Network')}}</h5>
									<div class="ui link list">
										<a class="item" href="http://wiki.freeioe.org/" target="_blank">{{_('FreeIOE Wiki')}}</a>
										<a class="item" href="http://freeioe.gitbook.io/doc/" target="_blank">{{_('Development Book')}}</a>
										<a class="disabled item">{{_('Application')}}</a>
										<a class="disabled item">{{_('Device Template')}}</a>
									</div>
								</div>
							</div>
						</div>
						{% end %}
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="/assets/semantic/semantic.min.js"></script>
		<script type="text/javascript" src="/assets/library/less.min.js"></script>
		<script type="text/javascript" src="/assets/library/countdown.min.js"></script>

		<script type="text/javascript" src="/assets/js/main.js"></script>
		<script type="text/javascript" src="/assets/js/menu.js"></script>
		<script type="text/javascript" src="/assets/js/popup.js"></script>
		<script type="text/javascript" src="/assets/js/validate-form.js"></script>
		<script type="text/javascript" src="/assets/js/message.js"></script>
		<script type="text/javascript" src="/assets/js/table.js"></script>
		<script type="text/javascript" src="/assets/js/modal.js"></script>

		<script async defer src="https://buttons.github.io/buttons.js"></script>
		{* blocks.body_script *}

		{* blocks.script *}
	</body>
</html>
